<template>
  <div>
    <Banner :src1="src1" :backgroundCss="backgroundCss"></Banner>
    <div class="simProblem">
      <div class="title">
        <!--<h3>常见问题</h3>-->

        <ul class="breadcrumb">
          <li v-for="(item,index) in brumblist" :key="index">
            <router-link :to="item.path">{{item.meta.title}}</router-link>
            <span class="separator" v-if="index !== brumblist.length-1">></span>
          </li>
        </ul>
        <!--<Breadcrumb separator=">">
          <BreadcrumbItem to="/">常见问题</BreadcrumbItem>
          <BreadcrumbItem to="proDetails">Components</BreadcrumbItem>
          <BreadcrumbItem >Breadcrumb</BreadcrumbItem>
        </Breadcrumb>-->
      </div>
      <div class="content">
        <div class="conLeft">
           <Menu theme="light" :open-names="['1']" accordion>
            <Submenu name="1">
              <template slot="title">工艺代码</template>
              <MenuItem name="1-1">
               西服工艺
              </MenuItem>
              <MenuItem name="1-2">
                衬衣工艺
                </MenuItem>
              <MenuItem name="1-3">
                西裤工艺
              </MenuItem>
            </Submenu>
            <Submenu name="2">
              <template slot="title">工艺代码</template>
              <MenuItem name="2-1">新增用户</MenuItem>
              <MenuItem name="2-2">活跃用户</MenuItem>
            </Submenu>
            <Submenu name="3">
                <template slot="title">量体规范</template>
                <MenuItem name="3-1">新增和启动</MenuItem>
                <MenuItem name="3-2">活跃分析</MenuItem>
                <MenuItem name="3-3">时段分析</MenuItem>
                <MenuItem name="3-4">用户留存</MenuItem>
                <MenuItem name="3-5">流失用户</MenuItem>
            </Submenu>
            <Submenu name="4">
              <template slot="title">量体百问百答</template>
                <MenuItem name="4-1">新增和启动</MenuItem>
                <MenuItem name="4-2">活跃分析</MenuItem>
                <MenuItem name="4-3">时段分析</MenuItem>
                <MenuItem name="4-4">用户留存</MenuItem>
                <MenuItem name="4-5">流失用户</MenuItem>
            </Submenu>
            <Submenu name="5">
              <template slot="title">量体规范</template>
                <MenuItem name="5-1">新增和启动</MenuItem>
                <MenuItem name="5-2">活跃分析</MenuItem>
                <MenuItem name="5-3">时段分析</MenuItem>
                <MenuItem name="5-4">用户留存</MenuItem>
                <MenuItem name="5-5">流失用户</MenuItem>
            </Submenu>
          </Menu>
        </div>
        <div class="conRight">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Banner from ".././components/banner.vue"
  export default {
    name: 'simProblem',
    components:{
        Banner
    },
    created () {
      this.getBreadcrumb();
    },
    props: ['separator'],
    data () {
      return {
        src1:require(".././assets/images/banner02.png"),
        backgroundCss:"simProblemPage",
        title: '',  // 页面标题
        brumblist: '' // 路由集合
      }
    },
    methods: {
      getBreadcrumb () {
        this.brumblist = this.$route.matched;
        this.$route.matched.forEach((item, index) => {
          // 判断父级路由是否为空字符串或者meta是否为首页,直接复写路径到根目录
          // 后面的就是判断路由和当前遍历的项目是否一致,是的话把标题的值给上
          item.meta.title === '常见问题' ? item.path = '/simProblem' : this.$route.path === item.path ? this.title = item.meta.title : '';
        })
      }
    },
    watch: {
      $route () {
        this.getBreadcrumb();
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.simProblem{
  width:1120px;
  margin: 0 auto;
  clear: both;
}
.ivu-menu-submenu-title{
  background: #fff !important;
}
/*面包屑*/
.simProblem .breadcrumb>li{
  height: 70px;
  line-height: 70px;
  font-weight: normal;
  float: left;
}
.simProblem .breadcrumb>li>a,.simProblem .breadcrumb>li .separator{
  color: #464c5b;
  font-size: 16px;
}
 /* .simProblem>.title>h3{
    height:70px;
    line-height:70px;
    font-weight: normal;
    font-size: 16px;
    color:#464c5b;
    text-align: left;
  }*/
  /*router-view*/
.simProblem>.content{
  display: flex;
  padding-bottom: 70px;
  clear: both;
}
/*导航*/
  .simProblem>.content>.conLeft{
    width:200px;
    text-align: left;
    background: #fff;
    border-radius: 20px;
  }
.simProblem>.content>.conLeft .ivu-menu-vertical{
  width:200px !important;
  border-radius: 20px;
  margin-top: 10px;
  }
.simProblem>.content>.conLeft>.ivu-menu>li>.ivu-menu-submenu-title{
  line-height: 50px;
  font-size: 16px;
  color:#464c5b;
}
.simProblem>.content>.conLeft>.ivu-menu>li>ul>li{
  line-height: 36px;
  font-size:14px;
  color:#9ea7b4;
  padding-left: 40px;
}
.simProblem .ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item{padding: 0}
.simProblem.ivu-menu-vertical .ivu-menu-item,.simProblem .ivu-menu-vertical .ivu-menu-submenu-title{padding: 0 24px}
.simProblem .ivu-menu-vertical .ivu-menu-submenu-title-icon{top:15px !important;}
.simProblem .ivu-menu-vertical .ivu-menu-item:hover,.simProblem .ivu-menu-vertical .ivu-menu-submenu-title:hover{background-color: #fff !important;}
.simProblem>.content>.conLeft>.ivu-menu>li>.ivu-menu-submenu-title .ivu-menu-vertical .ivu-menu-submenu-title-icon{
  float: right;
  position: relative;
  top: 18px;
}
.simProblem .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu){
  color: #464c5b;
  border-right: 2px solid #464c5b;
  z-index: 2;
}
.simProblem .ivu-menu-vertical.ivu-menu-light:after{
  background: none;
}
.simProblem .ivu-menu-vertical .ivu-menu-item:hover,.simProblem .ivu-menu-vertical .ivu-menu-submenu-title:hover{
  background:#fff !important;
}
/*修改左侧导航箭头默认指向*/
.simProblem .ivu-menu-vertical .ivu-menu-submenu-title-icon{
  transform: rotate(270deg);
}
.simProblem .ivu-menu-opened .ivu-menu-submenu-title-icon{
  transform: rotate(360deg);
}
</style>
